<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 这是修改之后的 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>赚币商城</title>
    <!-- <link href="https://cdn.bootcss.com/minireset.css/0.0.2/minireset.css" rel="stylesheet"> -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 动态设定rem -->
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    // docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                    docEl.style.fontSize = 50 * (clientWidth / 320) + 'px';
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);</script>
</head>

<body>
    <div id="container">
        <div id="goldTop">
            <div>
                <img src="images/jiantou.png">
            </div>
            <div>赚币商城</div>
        </div>
        <div id="goldBanner">
            <img src="images/banner@2x.png">
        </div>
        <div id="goldGame">
            <div class="explainBtn">
                <div>
                    <img src="images/btn_keyong.png">
                </div>
                <div>
                    <img src="images/btn_guize@2x.png">
                </div>
            </div>
            <div class="game">
                <div class="gameContainer">
                    <div class="light">
                        <div class="award">
                            <div class="gamePic">
                                <div class="gamePicCh">
                                    <div class="simItemContainer giftItem item-0"></div>
                                    <div class="simItemContainer giftItem item-1"></div>
                                    <div class="simItemContainer giftItem item-2"></div>
                                </div>
                                <div class="gamePicCh gamePicCh1">
                                    <div class="simItemContainer giftItem item-3"></div>
                                </div>
                                <div class="gamePicCh gamePicCh2">
                                    <div class="simItemContainer giftItem item-4"></div>
                                    <div class="simItemContainer giftItem item-5"></div>
                                    <div class="simItemContainer giftItem item-6"></div>

                                </div>
                                <div class="simItemContainer giftItem item-7 activeBtns"></div>
                                <div class="simItemContainer activeBtn"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="redPacked">
            <div class="deductTxt">
                抵扣红包兑换
            </div>
            <div class="deduct">
                <div class="deductPic deductPic1">
                    <div class="packedPic">
                        <div class="isnull"></div>
                        <div class="gaveMoney">赚吧理财</div>
                        <div class="packed">5元抵扣红包</div>
                        <div class="exchange">
                            <div>
                                <span style="color:red;">100</span>赚币</div>
                            <div>
                                <img src="images/btn_exchange-@2x.png">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="deductPic deductPic2">
                    <div class="packedPic">
                        <div class="isnull"></div>
                        <div class="gaveMoney">赚吧理财</div>
                        <div class="packed">5元抵扣红包</div>
                        <div class="exchange">
                            <div>
                                <span style="color:red;">100</span>赚币</div>
                            <div>
                                <img src="images/btn_exchange-@2x.png">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="deduct">
                <div class="deductPic deductPic1">
                    <div class="packedPic">
                        <div class="isnull"></div>
                        <div class="gaveMoney">赚吧理财</div>
                        <div class="packed">5元抵扣红包</div>
                        <div class="exchange">
                            <div>
                                <span style="color:red;">100</span>赚币</div>
                            <div>
                                <img src="images/btn_exchange-@2x.png">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="deductPic deductPic2">
                    <div class="packedPic">
                        <div class="isnull"></div>
                        <div class="gaveMoney">赚吧理财</div>
                        <div class="packed">5元抵扣红包</div>
                        <div class="exchange">
                            <div>
                                <span style="color:red;">100</span>赚币</div>
                            <div>
                                <img src="images/btn_exchange-@2x.png">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入抽奖js -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        (function ($, _) {
            'use strict';

            /**
             * @param (object) ev - extending object, which contain event properties.
             *  - (string) start - start event depending of @isTap.
             *  - (string) end - start event depending of @isTap.
             */
            var ev = {
                start: 'touchstart mousedown',
                end: 'touchend mouseup'
            };

            $.event.special[_] = {
                setup: function () {
                    $(this).off('click').on(ev.start + ' ' + ev.end, function (e) {
                        /**
                         * Adding jQuery event to @ev object depending of @isTap.
                         *
                         * Attention: value of this property will change two time
                         * per event: first time - on start, second - on end.
                         */
                        ev.E = e.originalEvent.changedTouches ? e.originalEvent.changedTouches[0] : e;
                    }).on(ev.start, function (e) {
                        /**
                         * Function stop if event is simulate by mouse.
                         */
                        if (e.which && e.which !== 1) {
                            return;
                        }

                        /**
                         * Extend @ev object from event properties of initial phase.
                         */
                        ev.target = e.target;
                        ev.time = new Date().getTime();
                        ev.X = ev.E.pageX;
                        ev.Y = ev.E.pageY;
                    }).on(ev.end, function (e) {
                        /**
                         * Compare property values of initial phase with properties
                         * of this, final, phase. Execute event if values will be
                         * within the acceptable and set new properties for event.
                         */
                        if (
                            ev.target === e.target &&
                            ((new Date().getTime() - ev.time) < 750) &&
                            (ev.X === ev.E.pageX && ev.Y === ev.E.pageY)
                        ) {

                            e.type = _;
                            e.pageX = ev.E.pageX;
                            e.pageY = ev.E.pageY;

                            $.event.dispatch.call(this, e);
                        }
                    });
                },

                /**
                 * Disassembling event.
                 */
                remove: function () {
                    $(this).off(ev.start, false).off(ev.end, false);
                }
            };

            $.fn[_] = function (fn) {
                return this[fn ? 'on' : 'trigger'](_, fn);
            };
        })(jQuery, 'tap');
    </script>

    <script src="js/index.js"></script>
</body>

</html>